<template>
  <mes-box v-model="visible" :width="1100" title="生产订单详情">
    <div class="order-detail">
      <!-- 订单信息 -->
      <el-card>
        <div style="display: flex; flex-wrap: wrap;">
          <div style="flex:1 0 300px;">订单状态：{{ detail.ProductStatus===1 ? '待计划' : detail.ProductStatus===2 ?'已计划':  detail.ProductStatus===3 ?'已完成' :  detail.ProductStatus===3 ?'已作废':'已排程' }}</div>
          <div style="flex:1 0 300px;">生产单号：{{ detail.ProductionOrderCode || '-' }}</div>
          <div style="flex:1 0 300px;">客户名称：{{  detail.DCustomerId===2 ? '客户二' :'客户一'|| '-'  }}</div>
          <div style="flex:1 0 300px;">订单编号：{{ detail.OrderCode || '-' }}</div>
          <div style="flex:1 0 300px;">订单来源：{{ detail.OrderSource || '-' }}</div>
          <div style="flex:1 0 300px;">备注：{{ detail.Remarks || '-' }}</div>
          <div style="flex:1 0 300px;">创建时间：{{ detail.CreateDate || '-' }}</div>
          <div style="flex:1 0 300px;">创建人：{{ detail.CreateUserName || '-' }}</div>
          <div style="flex:1 0 300px;">优先级：{{ detail.Priority == 1 ? '紧急' : '不紧急'  }}</div>
        </div>
      </el-card>
      <!-- 成品信息 -->
      <el-card style="margin-top: 20px;">
        <template #header>成品信息</template>
         <!-- {{ detail.OrderProductList }}  -->
        <el-table :data="detail.OrderProductList || []" style="width: 100%;">
          <el-table-column prop="productCode" label="成品编号"/>
          <el-table-column prop="productName" label="成品名称"/>
          <el-table-column prop="productType" label="规格型号"/>
          <el-table-column prop="productBatch" label="批次号"/>
          <el-table-column prop="sizeName" label="原料尺寸"/>
          <el-table-column prop="danWeiName" label="原料单位"/>
          <el-table-column prop="productCompany" label="成品单位">
             <template #default="scope">
                  {{ getProductUnitText(scope.row.productCompany) }}
              </template>
          </el-table-column>
          <el-table-column prop="productNumS" label="库存上限"/>
          <el-table-column prop="rawmanagementId" label="原料编号"/>
          <el-table-column prop="rawmanagementBh" label="原料名称"/>
          <el-table-column prop="productState" label="成品状态">
                <template #default="scope">
                  {{ getProductStateText(scope.row.productState) }}
              </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 关联生产计划 -->
      <el-card style="margin-top: 20px;">
        <template #header>关联生产计划</template>
        <el-table :data="detail.PlanningList || []" style="width: 100%;">
          {{ PlanningList }}
          <el-table-column prop="productionPlanningCode" label="生产计划编号"/>
          <el-table-column prop="productStatus" label="生产计划状态"/>
          <el-table-column prop="productId" label="成品编号"/>
          <el-table-column prop="productType" label="规格型号"/>
          <el-table-column prop="currentPlanNum" label="计划产量"/>
          <el-table-column prop="productionOrderId" label="订单编号"/>
          <el-table-column prop="actualEndDate" label="交付日期"/>
          <el-table-column prop="processmanagementId" label="工艺路线"/>
          <el-table-column prop="CarNo" label="车间"/>
          <el-table-column prop="planningStartDate" label="计划开始日期"/>
          <el-table-column prop="planningEndDate" label="计划结束日期"/>
        </el-table>
      </el-card>
      <!-- 关联工单 -->
      <el-card style="margin-top: 20px;">
        <template #header>关联工单</template>
        <el-table :data="detail.WorkOrderList || []" style="width: 100%;">
          <el-table-column prop="WorkOrderCode" label="工单编号"/>
          <el-table-column prop="WorkOrderStatus" label="工单状态"/>
          <el-table-column prop="PlanStartDate" label="计划开始日期"/>
          <el-table-column prop="PlanEndDate" label="计划结束日期"/>
          <el-table-column prop="ProductName" label="成品名称"/>
          <el-table-column prop="ProductCode" label="成品编号"/>
          <el-table-column prop="ProductCompany" label="单位"/>
          <el-table-column prop="PlanNum" label="计划产量"/>
          <el-table-column prop="FinishNum" label="完成数量"/>
          <el-table-column prop="CarNo" label="车间"/>
          <el-table-column prop="ProcessLine" label="工艺路线"/>
          <el-table-column prop="CurrentProcess" label="当前工序"/>
          <el-table-column prop="OrderSource" label="订单来源"/>
          <el-table-column prop="ProductionOrderCode" label="生产订单号"/>
          <el-table-column prop="OrderCode" label="订单编号"/>
          <el-table-column prop="CreateUserName" label="创建人"/>
        </el-table>
      </el-card>
      <el-button style="float: right;" type="primary" @click="showCreatePlanDialog">创建生产计划</el-button>
    </div>
    <template #footer>
      <el-button @click="close">关闭</el-button>
    </template>
  </mes-box>

  <!-- 引入新的创建生产计划弹框组件 -->
  <CreateProductionPlanDialog 
    v-model:visible="createPlanDialogVisible"
    :orderDetail="detail"
    :productList="detail.OrderProductList"
  />
</template>

<script setup>
import { ref, watch } from 'vue';
import CreateProductionPlanDialog from './CreateProductionPlanDialog.vue';

const props = defineProps({
  visible: Boolean,
  detail: Object
});

const getProductUnitText = (unitId) => {
    const stateMap = {
        1: '个',
        2: '箱',
        3: '件',
        4: '套',
        5: '台',
        6: '米',
        7: '条',
        // ... 其他状态映射
    };
    return stateMap[unitId] || '未知单位';
}
const getProductStateText = (stateId) => {
    const stateMap = {
        1: '启用',
        2: '禁用',
        // ... 其他状态映射
    };
    return stateMap[stateId] || '未知状态';
}
const emit = defineEmits(['update:visible']);
const visible = ref(props.visible);
const createPlanDialogVisible = ref(false);
watch(() => props.visible, v => visible.value = v);
watch(visible, v => emit('update:visible', v));
function close() {
  visible.value = false;
}

function showCreatePlanDialog() {
  createPlanDialogVisible.value = true;
}
</script>
<style scoped>
.order-detail { padding: 10px; }
</style>